<template>
    <div>
        <!-- 面包屑组件 -->
        <Crumbs :img="portrait" text1="账号管理" text2="添加账号" :text3="username"/>
        <div class="add-account">
            <h4>添加账号</h4>
            <div class="add-accout-from">
                <p class="ipt">账号<el-input v-model="input" placeholder="请输入账号" clearable></el-input></p>
                <p class="ipt">密码<el-input placeholder="请输入密码" v-model="pwd" show-password clearable></el-input></p>
                <p class="ipt">用户组
                    <el-select v-model="value" placeholder="请选择用户组" class="select">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </p>
            </div>
            
            <div class="btn">
                <el-button type="primary" class="add-btn" @click="clickadduser">添加</el-button>
                <el-button type="success" class="reset-btn">重置</el-button>
            </div>
            
        </div>
    </div>
</template>

<script>

    import Crumbs from "../../components/Crumbs"
    import {adduser} from "@/apis/api"
    let imgUrl=window.localStorage.getItem("imgUrl")
    let account=window.localStorage.getItem("account")
export default {
    components:{
        Crumbs
    },
    data(){
        return{
            portrait:"../assets/imgs/touxiang.jpg",
            username:"",
            options: [{
                value: '超级管理员',
                label: '超级管理员'
                }, {
                value: '普通管理员',
                label: '普通管理员'
                },
                ],
            value: '',
            input:"",
            pwd:""
        }

    },
    created(){
      this.portrait=imgUrl
      this.username=account
    },
    methods:{
        clickadduser(){
            adduser({
                    account:this.input,
                    password:this.pwd,
                    userGroup:this.value    
            })
            .then(res=>{
                    if(res.data.code===0){
                        this.$message({
                        message: res.data.msg,
                        type: 'success'
                        });
                        this.input="";
                        this.pwd="";
                        this.value=""
                    }else{
                         this.$message({
                            showClose: true,
                            message: '添加失败',
                            type: 'error'
                            });
                    }
                })
        }
    }

}
</script>

<style lang=less scoped>
    *{
        margin:0;
        padding:0
    }
    .add-account{
      margin:20px;
      padding:20px;
      background-color:#fff;
       h4{
        padding-bottom:10px;
        border-bottom:1px solid #eee;
      }
      .add-accout-from{
          width:200px;
          font-size:18px;
          color:#666;
          .ipt{
              margin-bottom:15px;
          }
          .el-input,.el-select{
              margin-top:5px;
          }
      }
      .btn{
          margin-left:10px;
          margin-top:20px;
          margin-bottom:20px;
           .reset-btn,.add-btn{
                height:40px;
                width:80px
            }
      }
    }
</style>